<template>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="user_center">
        <div class="col-lg-1 col-md-1"></div>
        <div class="col-lg-10 col-md-10 col-sm-12 col-xs-12" style="background: #f9f9f9">
            <div class="col-lg-2 col-md-2" style="background: #ff9f89">
                <div @click="selectUserMess" class="col-lg-12 col-md-12 font-white user_center_tab select_tab" name="user_center_tab" >我的信息</div>
                <div @click="selectMyorder" class="col-lg-12 col-md-12 font-white user_center_tab" name="user_center_tab" >{{ order }}</div>
                <div @click="selectFitSchedule" class="col-lg-12 col-md-12 font-white user_center_tab" name="user_center_tab" >{{ fitstep }}</div>
                <div @click="" class="col-lg-12 col-md-12 font-white user_center_tab" name="user_center_tab" >{{ ask }}</div>
            </div>
            <div class="col-lg-10 col-md-10 col-sm-12 col-xs-12">
                <!--个人信息-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="usermess" :style="{display:show.usermess}">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="height:150px;text-align:center;line-height:150px;">
                        <input type="file" class="headimg-file head-hide">
                        <img src="images/agent1.jpg" style="width:100px;height:100px;border-radius:50%">
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
                        <table class="col-lg-10 col-md-10 col-sm-12 col-xs-12">
                            <tr>
                                <td class="text-right font-td">用户名：</td>
                                <td class="padding-30"><input type="text" v-model="usermess.nickname" :value="usermess.nickname" class="center-input" readonly></td>
                            </tr>
                            <tr>
                                <td class="text-right font-td">手机号码：</td>
                                <td class="padding-30"><input type="text" v-model="usermess.tel" class="center-input" :value="usermess.tel" readonly></td>
                            </tr>
                            <tr>
                                <td class="text-right font-td"> 地址：</td>
                                <td id="city_1">
                                    <areas @area="area" :msg="add"></areas>
                                </td>
                            </tr>

                            <tr>
                                <td></td>
                                <td class="padding-30">
                                    <input type="button" @click="toEditor" class="center-btn" value="编辑">
                                    <input type="button" @click="toChange" class="center-btn hide" value="保存">
                                </td>
                            </tr>
                        </table>

                    </div>
                </div>
                <!--订单-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="myorder" :style="{display:show.myorder}">
                    <div class="table-responsive">
                        <table class="table max-table">
                            <caption>订单列表</caption>
                            <thead>
                            <tr>
                                <th>业主姓名</th>
                                <th>电话</th>
                                <th>房屋面积</th>
                                <th>装修公司</th>
                                <th>状态</th>
                            </tr>
                            </thead>
                            <tbody>
                            <template v-for="order in orders">
                                <tr>
                                    <td>{{ order.username }}</td>
                                    <td>{{ order.usertel }}</td>
                                    <td>{{ order.floor_space }}</td>
                                    <td>{{ order.name }}</td>
                                    <td v-if="order.fitment_state == 0">未接单</td>
                                    <td v-if="order.fitment_state == 1">装修中</td>
                                    <td v-if="order.fitment_state == 2">装修完成</td>
                                    <td v-if="usermess.role == 1">
                                        <input type="button" :value="order.order_btn" class="order-btn" @click="orderTaking(order.orderid)">
                                    </td>
                                </tr>
                            </template>
                            </tbody>
                        </table>

                        <table class="table min-table">
                            <caption>订单列表</caption>
                            <tbody>
                                <template v-for="order in orders">
                                    <tr>
                                        <td>{{ order.username }}</td>
                                        <td>{{ order.usertel }}</td>
                                        <td>{{ order.floor_space }}</td>
                                        <td>{{ order.name }}</td>
                                    </tr>
                                    <tr>
                                        <td></td><td></td>
                                        <td v-if="order.fitment_state == 0">未接单</td>
                                        <td v-if="order.fitment_state == 1">装修中</td>
                                        <td v-if="order.fitment_state == 2">装修完成</td>
                                        <td v-if="usermess.role == 1">
                                            <input type="button" :value="order.order_btn" class="order-btn" @click="orderTaking(order.orderid)">
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!--装修进度 包括装修日记和记账本-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="fitSchedule" :style="{display:show.fitSchedule}">

                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="border:solid 1px #ccc">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="height:50px;">
                            <button @click="changeColor1" :style="{background:buttoncolor1}" style="outline:none;width:120px;height:50px;border: solid 1px #ccc;">施工日记</button>
                            <button @click="changeColor2" :style="{background:buttoncolor2}" style="outline:none;width:120px;height:50px;border: solid 1px #ccc;">记账本</button>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="top:10px" :style="{display:showdiary}">
                            <full-calendar :events="fcEvents" first-day='1' locale="fr"
                                           @changeMonth="changeMonth"
                                           @eventClick="eventClick"
                                           @dayClick="dayClick"
                                           @moreClick="moreClick">
                                <template scope="p">
                                    <p><i class="fa">sadfsd</i> {{ p.event.title }} test</p>
                                </template>
                            </full-calendar>
                        </div>

                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 assess"
                             :style="{display:showbook}">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th>商品</th>
                                            <th>价格</th>
                                            <th v-if="usermess.role == 1"><span class="glyphicon glyphicon-plus" style="cursor:*" @click="addCashBook"></span></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                            <template v-for="book in cashbook">
                                                <tr>
                                                    <td>{{ book.resume }}</td>
                                                    <td>{{ book.price }}</td>
                                                </tr>
                                            </template>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                    </div>



                </div>
            </div>
        </div>

        <!--添加装修日记模态框-->
        <div class="modal fade" id="diary" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" style="padding: 10px !important;">装修日记</h4>
                    </div>
                    <div class="modal-body">

                        <table class="order-table">

                            <tr>
                                <td>订单号</td>
                                <td>
                                    <select v-model="diary.orderid" style="width:15%;height:30px">
                                        <template v-for="order in orders">
                                            <option :id="order.orderid">{{ order.orderid }}</option>
                                        </template>
                                    </select>
                                </td>
                            </tr>

                            <tr>
                                <td>内容</td>
                                <td>
                                    <textarea cols="20" rows="5" v-model="diary.con"></textarea>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="modal-footer" style="padding: 10px !important;">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-order" @click="addDiary">确认</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <!--添加记账本模态框-->
        <div class="modal fade" id="cashbook" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" style="padding: 10px !important;">装修日记</h4>
                    </div>
                    <div class="modal-body">

                        <table class="order-table">
                            <tr>
                                <td>订单号</td>
                                <td>
                                    <select v-model="books.orderid" style="width:15%;height:30px">
                                        <template v-for="order in orders">
                                            <option :id="order.orderid">{{ order.orderid }}</option>
                                        </template>
                                    </select>
                                </td>
                            </tr>

                            <tr>
                                <td>商品</td>
                                <td>
                                    <input type="text" v-model="books.goods"
                                           class="form-control bottom-20" placeholder="商品">
                                </td>
                            </tr>

                            <tr>
                                <td>价格</td>
                                <td>
                                    <input type="text" v-model="books.price"
                                           class="form-control bottom-20" placeholder="价格">
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="modal-footer" style="padding: 10px !important;">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-order" @click="addBook">确认</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
</template>
<style>
    .text-right{
        text-align:right
    }
    .padding-30{
        padding-bottom:30px;
    }
    .font-td{
        font-size: 1.5em;
        color: #999;
    }
    .center-input{
        width:50%;
        height:40px;
        outline: none;
        border: solid 1px #ccc;
        background: white;
    }
    .hide{
        dispaly:node
    }
    .center-btn{
        outline: none;
        border: none;
        background: #F45B4B;
        color: white;
        width: 54%;
        height: 40px;
        position: relative;
        margin-top: 20px
    }
    .order-btn{
        outline: none;
        border: none;
        background: #F45B4B;
        color: white;
        width: 80%;
        height: 25px;
    }

    .headimg-file{
        width:100px;
        height:100px;
        border-radius:50%;
        left: 105px;
        position: relative;
        top: 25px;
        opacity: 0;
        z-index: 10;
    }
    .head-hide{
        display: none !important;
    }
    .head-inline-block{
        display: inline-block !important;
    }
    @media (max-width:700px){
        .max-table{
            display: none
        }
        .min-table{

        }
    }
    @media (min-width:700px){
        .max-table{

        }
        .min-table{
            display: none
        }
    }

</style>
<script>
    import area from '../tools/province_city.vue';


    //获得年月日      得到日期oTime
        function getMyDate(str){
            var oDate = new Date(str),
            oYear = oDate.getFullYear(),
            oMonth = oDate.getMonth()+1,
            oDay = oDate.getDate(),
            oHour = oDate.getHours(),
            oMin = oDate.getMinutes(),
            oSen = oDate.getSeconds(),
            oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin) +':'+getzf(oSen);//最后拼接时间
            return oTime;
        };
        //补0操作
        function getzf(num){
            if(parseInt(num) < 10){
                num = '0'+num;
            }
            return num;
        }


    export default{
        data(){
            return{
                show:{
                    usermess: 'inline-block',
                    myorder: 'none',
                    fitSchedule: 'none'
                },
                usermess:'',
                order:'',
                fitstep:'',
                ask:'',
                orders:'',
                add:'',
                order_btn:'接单',
                fcEvents : [
                    {
                      title : 'Sunny Out of Office',
                      start : '2000-08-25',
                      end : '2000-08-25'
                    },
                    {
                      title : '装修开始',
                      start : '2017-05-15',
                      end : '2017-05-15'
                    }
                ],
                showmodel:'none',
                diary:{
                    con:'',
                    date:'',
                    orderid:''
                },
                books:{
                    goods:'',
                    price:'',
                    orderid:''
                },
                buttoncolor1:'#ccc',
                buttoncolor2:'white',
                showdiary:'inline-block',
                showbook:'none',
                cashbook:''
            }
        },
        components:{
            'areas': area
        },
        methods:{
            changeColor1 : function() {
               this.buttoncolor1 = '#ccc';
               this.buttoncolor2 = 'white';
               this.showdiary = 'inline-block';
               this.showbook = 'none';
            },
            changeColor2 : function() {
               this.buttoncolor2 = '#ccc';
               this.buttoncolor1 = 'white';
               this.showdiary = 'none';
               this.showbook = 'inline-block';
            },
            selectUserMess: function(e){
                $('[name=user_center_tab]').removeClass('select_tab');
                e.target.className = 'col-lg-12 col-md-12 font-white user_center_tab select_tab';

                for(var i in this.show){
                    this.show[i] = 'none';
                    this.show.usermess = 'inline-block';
                }

            },
            selectMyorder: function(e){
                $('[name=user_center_tab]').removeClass('select_tab');
                e.target.className = 'col-lg-12 col-md-12 font-white user_center_tab select_tab';

                for(var i in this.show){
                    this.show[i] = 'none';
                    this.show.myorder = 'inline-block';
                }
            },
            selectFitSchedule: function(e){
                $('[name=user_center_tab]').removeClass('select_tab');
                e.target.className = 'col-lg-12 col-md-12 font-white user_center_tab select_tab';

                for(var i in this.show){
                    this.show[i] = 'none';
                    this.show.fitSchedule = 'inline-block';
                }
            },
            toEditor: function(){
                $('input').attr('readonly', false);
                $('select').attr('disabled', false);
                $('.center-btn').hide();
                $('.hide').show();
                $('.hide').removeClass('hide');
                $('.headimg-file').removeClass('head-hide');
                $('.headimg-file').addClass('head-inline-block');
            },
            toChange: function(){
                this.$http.post('users/alterUserMess',{'mess':this.usermess,'add':this.add})
                    .then(function(res){
                        alert('修改成功')
                    });

            },
            area: function(add){
                //接受子组件数据
                this.add = add;
            },
            orderTaking: function(orderid){
                var _this = this;
                this.$http.post('users/orderTaking',{'id': orderid})
                    .then(function(res){
                        for(var i in _this.orders){
                            if(_this.orders[i].orderid == orderid){
                                _this.orders[i].fitment_state = 1;
                            }
                        }
                        _this.order_btn = '装修完成';
                    });
            },

            'changeMonth' (start, end, current) {
                console.log(start,end,current);
            },
            'eventClick' (event, jsEvent, pos) {
               console.log('eventClick', event, jsEvent, pos)
            },
            'dayClick' (day, jsEvent) {
              console.log('dayClick', day, jsEvent);
              if(this.usermess.role == 1){
                $('#diary').modal();
                this.diary.date = day
              }
            },
            'moreClick' (day, events, jsEvent) {
              console.log('moreCLick', day, events, jsEvent)
            },
            addCashBook(){
                $('#cashbook').modal();
            },
            addDiary(){
                const _this = this;
                this.$http.post('users/addDiary', this.diary)
                    .then(function(res){
                        _this.fcEvents.push({
                            title : _this.diary.con,
                            start : new Date(_this.diary.date).toISOString().slice(0,10),
                            end : new Date(_this.diary.date).toISOString().slice(0,10)
                        });
                        $('#diary').modal('toggle');
                    });
            },
            addBook(){
                const _this = this;
                this.$http.post('users/addCashBook', this.books)
                    .then(function(res){
                        $('#cashbook').modal('toggle');
                    });
            }
        },
        created(){
            var _this = this;
            this.$http.get('users/usermess')
                .then(function(res){
                    _this.usermess = res.body[0];
                    if(_this.usermess.role == 0){
                        _this.order = '我的订单';
                        _this.fitstep = '装修进度';
                        _this.ask = ''
                    }else if(_this.usermess.role == 1){
                        _this.order = '所有订单';
                        _this.fitstep = '装修进度'; 
                        _this.ask = '';
                    }else if(_this.usermess.role == 2){
                         _this.order = '我的设计';
                        _this.fitstep = '';
                        _this.ask = '';
                    }
                })
                .then(function(){
                    _this.$http.get('users/getOrder')
                        .then(function(res){
                            _this.orders = res.body;
                            for(var i in _this.orders){
                                if(_this.orders[i].fitment_state == 1){
                                    _this.orders[i].order_btn = '装修完成';
                                }else{
                                    _this.orders[i].order_btn = '接单';
                                }
                            }
                        });
                })
                .then(function(){
                    _this.$http.get('users/getDiary')
                        .then(function(res){
                            if(res.body.length>0){
                                for(var i in res.body){
                                    res.body[i].start = getMyDate(parseInt(res.body[i].start));
                                    res.body[i].end = getMyDate(parseInt(res.body[i].end));
                                }
                                _this.fcEvents = res.body;
                            }
                        });
                })
                .then(function(res){
                    _this.$http.get('users/getCashBook')
                        .then(function(res){
                            _this.cashbook = res.body;
                        });
                });
        }
    }
</script>
